<template>
<div class="guidContainer" >
        <yd-slider autoplay="300000" class="slider" :loop="false">
            <yd-slider-item v-for="(item,index) in list" :key="index" class="item">
                    <img :src="item.img">
                     <button @touchend="jump()">跳过引导</button>
            </yd-slider-item>
            <yd-slider-item class="last">
                    <img src="./img/1.png">
                     <button @touchend="jump()">现在开始</button>
            </yd-slider-item>
        </yd-slider>

</div>

</template>

<script type="text/babel">
    export default {
        data(){
            return{
                list:[
                    {"img":require('./img/1.png')},
                    {"img":require('./img/1.png')},
                    {"img":require('./img/1.png')},
                ]
            }
        },
        methods:{
            jump(){
                localStorage.direct=true;
                this.$router.push({path:'/home'})
            }
        },
      created(){
//        plus.navigator.setStatusBarBackground('#FFB36E');
      }
    }
</script>
<style lang="less" scoped>
    @import '~less/base';
    .guidContainer{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .slider{//让图片占满全屏
            height: 100%;
            img{
                height: 100%;
            }
            .item{//父元素定位
                position: relative;
            }
        }
        .last{//最后一张引导图
           position: relative;
        }
            button{//跳过按钮
            position: absolute;
            bottom: .5rem;
            z-index: 100;
            border: none;
            outline: none;
            font-size: 20px;
            background-color:rgba(255,255,255,0.3);
            border-radius: 8px;
            padding: .1rem;
            right: 5%;
            color: @color-t;
            }
    }
</style>

